<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>{{ titles }}</span>
          <el-button size="mini" style="float: right" @click="router.go(-1)">返回</el-button>
        </div>
      </template>
      <el-form ref="form" :model="formData" label-position="left" label-width="90px" margin-left="10px">
        <el-form-item label="名称：">
          <el-input v-model="formData.name" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="链接：">
          <el-input v-model="formData.link" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="formData.remark" style="width: 400px" type="textarea" :rows="6"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import workApi from '../../api/work'
const router = useRouter()
const route = useRoute()
const isEdit = ref(false)
const formData = ref({
  name: '',
  link: '',
  create_date: new Date(),
  remark: '',
  author: '',
})
const titles = ref()

// 获取全局变量
const baseURL = window.globalConfig.baseURL
const username = sessionStorage.getItem('username') //日志需要

const submitForm = async () => {
  //判断是否正确输入
  if (!formData.value.name) {
    ElMessage.warning('请填写名称')
    return
  }

  formData.value.author = username

  if (isEdit.value) {
    const data = {
      id: route.query.id,
      data: formData.value,
      username: username,
    }
    data.data = formData.value

    const res = await workApi.updateOther(data)
    // 处理后台返回的结果，你可以根据具体情况进行处理
    if (res.data.success) {
      ElMessage.success('更新成功')
      router.go(-1)
      // router.push('/week_report')
    } else {
      ElMessage.error('更新失败')
    }
  } else {
    // 新增，提交到后台
    formData.value.username = username
    const res = await workApi.addOther(formData.value)
    // 处理后台返回的结果，你可以根据具体情况进行处理
    if (res.data.id) {
      ElMessage.success('新增成功')
      router.go(-1)
      // router.push('/week_report')
    } else {
      ElMessage.error('新增失败')
    }
  }
}
onMounted(async () => {
  console.log(route.query)
  if (route.query.id) {
    //请求数据
    const orderRes = await workApi.getOther({ id: route.query.id })
    console.log(orderRes.data[0])
    Object.assign(formData.value, orderRes.data[0])
    titles.value = '编辑信息'
    isEdit.value = true
  } else {
    titles.value = '新增信息'
  }
})
</script>

<style scoped>
.el-button-group {
  vertical-align: baseline;
}

el-group {
  position: relative;
  display: inline-block;
}

.el-progress--line {
  margin-bottom: 15px;
  width: 248px;
}

.nameDialog li {
  cursor: pointer;
  margin-bottom: 10px;
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  .el-card {
    overflow: auto;
  }
}

</style>
